<template>
	<div class="container">
		<div>
			<input type="text" v-model="name">
		</div>
		<sure-button @click="submit()"></sure-button>
	</div>
</template>
<script>
	import {updateUserName} from './../../vuex/action'
	import SureButton from './../public/SureButton'
	export default {
		data: function () {
			return {
				name: this.sname
			}
		},
		vuex: {
			getters: {
				sname: function (state) {
					return state.user.name
				}
			},
			actions: {
				updateUserName
			}
		},
		methods: {
			submit: function () {
				this.updateUserName(this.name)
			}
		},
		components: {
			SureButton
		}
	}
</script>
<style scoped>
	input {
		width: 100%;
		border: none;
		outline: none;
		padding: 20px 0 20px 20px;
	}
	.container>div {
		border-bottom: 1px solid #ccc;
		margin-bottom:20px;
	}
</style>